<template>
	<!-- <h1>大赛</h1> -->
	<div class="nav">
		<Nav></Nav>
	</div>
	<div  class="main">
		<div class="title">
			<h4>征集优秀设计作品X高流量品牌曝光</h4>
			<h1>花瓣大赛 可衡量效果的高质量营销</h1><br>
			<div>
				<button class="one">了解大赛</button>
				<button class="two" style="background-color: #FF5967;color: #fff;">我要发起大赛</button>
			</div>
		</div>
		
		<h2>大赛成功案例</h2>
		<div class="dasai_box">
			<div>
				<router-link :to="{name:'dasai4'}">
					<img src="../img/dasai4.webp" alt="">
					<div>绘王-数位屏 桌面插画大赛</div>
				</router-link>
			</div>
			<div>
				<router-link :to="{name:'dasai5'}">
					<img src="../img/dasai5.webp" alt="">
					<div>iCar虚拟人i-VA生命共创纪</div>
				</router-link>
			</div>
			
			<div>
				<router-link :to="{name:'dasai3'}">
					<img src="../img/dasai3.webp" alt="">
					<div>AI创作大赛|异想梦境世界</div>
				</router-link>
			</div>
		</div>
		<div class="dasai_box">
			<div>
				<img src="../img/dasai1.webp" alt="">
				<div>《第十届丝绸之路国际电影节传播元素专业设计大赛》</div>
			</div>
			<div>
				<img src="../img/dasai2.webp" alt="">
				<div>福临门品牌IP形象征集大赛</div>
			</div>
			<div>
				<img src="../img/dasai6.webp" alt="">
				<div>西双版纳世界旅游名城IP形象设计大赛</div>
			</div>
		</div>
		
	</div>
	<router-view></router-view>
</template>

<script setup>
	import {getCurrentInstance,ref,reactive,onMounted} from 'vue'
	import Nav from './nav.vue'
	let act = ref([
		[
			{
				img:'../img/dasai1.webp',
				text:'《第十届丝绸之路国际电影节传播元素专业设计大赛》'
			},
			{
				img:'../img/dasai2.webp',
				text:'福临门品牌IP形象征集大赛'
			},
			{
				img:'../img/dasai3.webp',
				text:'AI创作大赛|异想梦境世界'
			},
		],
		[
			{
				img:'../img/dasai4.webp',
				text:'绘王-数位屏 桌面插画大赛'
			},
			{
				img:'../img/dasai5.webp',
				text:'iCar虚拟人i-VA生命共创纪'
			},
			{
				img:'../img/dasai6.webp',
				text:'西双版纳世界旅游名城IP形象设计大赛'
			},
		]
	])
</script>

<style scoped>
	.nav {
		position: absolute;
		top: 0;
		left: 60px;
	}
	.main {
		width: 100%;
		background-image: linear-gradient(to bottom right, #EDF6FF, #F7F9FA);
		text-align: center;
		/*  */
		/* position: absolute;
		top: 70px;
		left: 80px; */
		margin-top: 60px;
	}
	.title {
		width: 100%;
		height: 210px;
		margin: 0 auto;
		/* border: 1px solid red; */
		text-align: center;
		background-image: linear-gradient(to bottom right, #EDF6FF, #F7F9FA);
	}
	h4 {
		color: #5b5e6a;
		font-size: 20px;
	}
	.title button{
		width: 110px;
		height: 40px;
		margin-left: 10px;
		outline: none;
		border: none;
		border-radius: 10px;
		background-color: white;
	}
	.title>div>.one {
		border: 1px solid #adadad;
	}
	.dasai_box {
		display: flex;
		justify-content: space-between;
	}
	.dasai_box>div {
		width: 400px;
		height: 300px;
		background-color: #fff;
		margin-top: 20px;
		/* border: 1px solid red; */
		border-radius: 20px;
	}
	.dasai_box img {
		width: 400px;
		height: 255px;
		border-radius: 20px 20px 0 0;
		margin-bottom: 10px;
	}
</style>